<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./static/admin/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="./static/admin/css/admin.css"/>
		    
	    <script type="text/javascript" src="./static/js/jquery-1.12.4.js"></script>
	    <script type="text/javascript" src="./static/js/my.js"></script>
	</head>
	<body>
	<form class="layui-form column-content-detail">
					<div class="layui-tab">
						<ul class="layui-tab-title">
							<li class="layui-this">网站编辑</li>
						</ul>
                        <input type="hidden" name="url_id">
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<div class="layui-form-item">
									<label class="layui-form-label">监控项名字：</label>
									<div class="layui-input-block">
										<input type="text" name="name" required lay-verify="required" placeholder="请输入监控项名字" autocomplete="off" class="layui-input">
									</div>
								</div>

								<div class="layui-form-item">
									<label class="layui-form-label">URL：</label>
									<div class="layui-input-block">
										<input type="text" name="url" disabled autocomplete="off" class="layui-input layui-disabled">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">是否启用：</label>
									<div class="layui-input-block">
										<input type="checkbox" name="is_enable" lay-skin="switch" id="switch">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">访问间隔：</label>
									<div class="layui-input-block">
										<select name="interval" lay-verify="required">
											<option value="5">5分钟</option>
											<option value="10">10分钟</option>
											<option value="15">15分钟</option>
										</select>
									</div>
								</div>

							</div>

						</div>
					</div>
					<div class="layui-form-item" style="padding-left: 10px;">
						<div class="layui-input-block">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="site-add">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
	<script src="./static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="./static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="./static/js/jquery-1.12.4.js"></script>
	<script>
		function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg);  //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
		}
		//编辑页面表单初始化
		layui.use(['form', 'element'], function () {
			var form = layui.form();
			var element = layui.element();
			form.render();
			load();
			function load() {
				var url_id = getUrlParam('id');
				// alert(url_id);
				//报警通知信息
				$.ajax({
					"url": "/api/website?url_id="+url_id,
					"type": "get",
					"dataType": 'json',
					xhrFields: {
						withCredentials: true
					},
					error: function () {
						alert("站点信息获取失败！");
					},
					success: function (data) {
						var d = data.data;
						// alert(d['interval']);
						// console.log(d);

						if(data.code != 20){
							alert(data.msg);
						}else{
							console.log(d['is_enable']);
	                        // 填充表单
						    $("input[name='url_id']").val(d['url_id']);
							$("input[name='name']").val(d['name']);
							$("input[name='url']").val(d['url']);
							// $('url').value = d['url'];
							// $("div[lay-skin='_switch']").removeClass();
							var status= d['is_enable'];
							if (status== 1) {
								console.log("----");
								$("#switch ").attr('checked', 'checked');
							} else {
								$("#switch ").removeAttr('checked');
							}
							form.render();
							// if(d['is_enable'] == 1){

							// 	$("div[lay-skin='_switch']").addClass("layui-unselect layui-form-switch layui-form-onswitch")
							// }else{
							// 	alert("===========");
							// 	$("div[lay-skin='_switch']").addClass("layui-unselect layui-form-switch")
							// }
							$("dd").removeClass();
							$('dd[lay-value="'+d['interval']+'"]').addClass("layui-this");
							$("input[class='layui-input layui-unselect']").val(d['interval']+"分钟");
							// layui.form.render();

						}
					}
				})
			}
		});
		
		
	</script>
	<script>
		//更新数据
		layui.use(['form', 'element'], function () {
			var form = layui.form();
			var element = layui.element();
			form.render();
			form.on('submit(site-add)', function(data) {
				// layer.msg(JSON.stringify(data.field));
				console.log(JSON.stringify(data.field));
				$.ajax(
						{
							url: '/api/website',
							type: 'POST',
							data: JSON.stringify(data.field),
							xhrFields: {
								withCredentials: true
							},
							success: function (obj) {

								if (obj.code == 20) {
									alert("更新成功了，页面会重新加载");
									// $(location).attr('href', 'index.html');
									location.reload();
								} else {
									alert(obj.msg);
								}
							},
							error: function (obj) {
								alert('未知错误');
							}
						}
				);
				return false;
			});
		});

	</script>
	</body>
</html>